<template>
    <n-config-provider :theme="theme" :theme-overrides="themeOverrides">
        <router-view />
    </n-config-provider>
</template>

<script>
    name: 'App'
</script>

<script setup>
    import { computed } from 'vue'
    import { router } from './router'
    import { loadingBar } from './utils/discreteApi'
    import { useAppStore } from './stores'

    const appStore = useAppStore()

    const theme = computed({
        get() {
            return appStore.theme
        }
    })

    const themeOverrides = {
        common: {
            primaryColor: '#2d8cf0',
            primaryColorHover: '#2d8cf0',
            primaryColorPressed: '#2d8cf0',
            primaryColorSuppl: '#2d8cf0'
        },
        LoadingBar: {
            colorLoading: '#2d8cf0'
        }
    }

    router.beforeEach(() => {
        loadingBar.start()
    })

    router.afterEach(() => {
        loadingBar.finish()
    })
</script>

<style lang="less" scoped="scoped"></style>
